<template>
	<view>
		<view class="topsBox">
			<text class="frame"></text>
			<text class="addNum">增加数量</text>
		</view>
		<view class="inputBox">
			<input class="inputNum" type="text" placeholder="请输入要增加的数量"/>
			<text class="company">个</text>
		</view>
		<view class="topsBox">
			<text class="frame"></text>
			<text class="addNum">增加单价</text>
		</view>
		<view class="inputBox">
			<input maxlength="12" class="inputNum" v-model="unitPrice" type="text" placeholder="请输入要增加的单价(无需添加请输入0）"/>
			<text class="company">元</text>
		</view>
		<view class="inputBoxb">
			<text class="unitPrice"> <text class="symbol">￥</text> {{unitPrice}} <text class="unitPricetips">（加价后总价：￥7.00）</text></text>
			<text class="company">元</text>
		</view>
		<view class="topsBox">
			<text class="frame"></text>
			<text class="addNum">支付方式</text>
		</view>
		<view class="amountPayableBBox">
			<text class="amount">应付金额:</text>
			<text class="totalPrice"><text class="symbol">￥</text>{{totalPrice}}</text>
		</view>
		<view @click="choseBut(index)" class="amountPayableBBox" v-for="(item,index) in payMethodsdata" :key="index">
			<image class="payImg" :src="item.payImg"></image>
			<text class="payFont">{{item.payFont}}</text>
			<image v-show="index==num" class="chooseImg" :src="item.chooseImg"></image>
		</view>
		<view class="confirmPayment">
			确认支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitPrice:'',
				totalPrice:'0.00',
				num:0,
				payMethodsdata:[{
					payImg:'../../../static/user2/zfb.png',
					payFont:'支付宝',
					chooseImg:'../../../static/user2/dui.png'
				},
				{
					payImg:'../../../static/user2/wx.png',
					payFont:'微信',
					chooseImg:'../../../static/user2/dui.png'
				}]
			};
		},
		methods:{
			choseBut(e){
				this.num=e;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F1F1F1;
	}
     .topsBox{
		 width: 710rpx;
		 height: 90rpx;
		 display: flex;
		 align-items: center;
		 margin-left: 20rpx;
	 }
     .frame{
		 width:10rpx;
		 height:30rpx;
		 background:rgba(115,34,216,1);
		 border-radius:5rpx;
	 }
     .addNum{
		 font-size:28rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(46,46,46,1);
		 margin-left: 12rpx;
		 margin-top: -4rpx;
	 }
	 .inputBox{
		 width:710rpx;
		 height:120rpx;
		 background:rgba(255,255,255,1);
		 border-radius:10rpx;
		 margin-left: 20rpx;
		 display: flex;
		 align-items: center;
		 position: relative;
	 }
	 .inputNum{
		 width: 400rpx;
		 font-size:26rpx;
		 position:absolute;
		 left: 20rpx;
	 }
	 .company{
		 font-size:24rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(46,46,46,1);
		 position: absolute;
		 right: 30rpx;
	 }
	 .inputBoxb{
	 		 width:710rpx;
	 		 height:120rpx;
	 		 background:rgba(255,255,255,1);
	 		 border-radius:10rpx;
	 		 margin-left: 20rpx;
	 		 display: flex;
	 		 align-items: center;
	 		 position: relative;
			 border-top: 1rpx solid #E5E5E5;
	 }
	 .unitPrice{
		 font-size: 38rpx;
		 color: #FF3B30;
		 position: absolute;
		 left: 20rpx;
	 }
	 .symbol{
		 font-size: 28rpx;
		 color: #FF3B30;
		 }
	 .unitPricetips{
		 font-size:24rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(142,142,142,1);
		 position: relative;
		 top: -6rpx;
	 }
	 .amountPayableBBox{
		 width:710rpx;
		 height:120rpx;
		 background:rgba(255,255,255,1);
		 border-radius:10rpx;
		 margin-left: 20rpx;
		 margin-top: 1rpx;
		 display: flex;
		 align-items: center;
		 position: relative;
	 }
	 .amount{
		 font-size:28rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(46,46,46,1);
		 position: absolute;
		 left: 21rpx;
	 }
	 .totalPrice{
		 font-size: 38rpx;
		 color: #FF3B30;
		 position: absolute;
		 right: 22rpx;
	 }
	 .payImg{
		 width:70rpx;
		 height:70rpx;
		 position: absolute;
		 left: 20rpx;
	 }
	 .payFont{
		 font-size:28rpx;
		 font-family:PingFang SC;
		 font-weight:400;
		 color:rgba(46,46,46,1);
		 position: absolute;
		 left: 105rpx;
	 }
	 .chooseImg{
		 width:40rpx;
		 height:40rpx;
		 position: absolute;
		 right: 25rpx;
	 }
	 .confirmPayment{
		 width:710rpx;
		 height:90rpx;
		 background:rgba(115,34,216,1);
		 box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		 border-radius:20rpx;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 font-size:38rpx;
		 font-family:PingFang SC;
		 font-weight:bold;
		 color:rgba(255,255,255,1);
		 position: absolute;
		 bottom: 30rpx;
		 left: 20rpx;
		 }
</style>
